<template>
  <div class="home flex fww">
    <Air :air="data.air"/>
    <Beam :beam="data.beam"/>
    <Pressure :pressure="data.pressure"/>
    <Soil :soil="data.soil"/>
    <!-- <el-card class="item">
      <template #header>
        <div class="card-header">
          <span>Card name</span>
        </div>
      </template>
      <div>内容</div>
    </el-card> -->
  </div>
</template>

<script setup>
import Air from './Air.vue';
import Beam from './Beam.vue';
import Pressure from './Pressure.vue';
import Soil from './Soil.vue';
import { sensorCount } from '../../api/index'
import { onMounted, ref } from 'vue';


const data = ref({})
const getData = async () => {
  let res = await sensorCount();
  data.value = res.data; 
}

onMounted(getData);



</script>




<style lang="less">
.home {
  .item {
    width: 40%;
    flex-grow: 1;
    margin-bottom: 5px;

    &:nth-child(even) {
      margin-left: 5px;
    }
  }
}
</style>